import { Mask } from 'antd-mobile'
import React from 'react'
import styles from './index.module.less'
import closeImg from '@/resource/home/close.png'
import type { ModalPropsType } from './interface'

const CustomModal = (props: ModalPropsType) => {
    const { onClose, visible, onOk, title, content } = props

    return (
        <div className={styles.modal_container} style={{ display: visible ? 'block' : 'none' }}>
            <Mask visible />
            <div className={styles.modal_main}>
                <div className={styles.modal_header}>
                    <div className={styles.title}>{title}</div>
                    <img className={styles.close_btn} src={closeImg} onClick={onClose} />
                </div>
                <div className={styles.modal_content_wrapper}>
                    <div className={styles.modal_content}>{content}</div>
                    {onOk && (
                        <div className={styles.ok_btn} onClick={onOk}>
                            OK
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}

export default CustomModal
